<template>
    <view class="fl-s-c" style="background: transparent;">
       <image @click.stop="$emit('closePup')" class="circle" style="margin-right: -35rpx; width: 70rpx; height: 70rpx; align-self: flex-end;" src="/static/images/home/code_close_btn.png"></image>
        <view class="m-t-30 fm-ali relative fl-c" style="width: 534rpx; height: 934rpx;" @click.stop="">
            <image :src="codeBg" class="absolute-0" style="width: 534rpx; height: 934rpx;"></image>
						<view class="fl-s-c w-1">
							<text class="fs-26" style="color: #FA8B0A;">邀请码</text>
							<text class="fs-48 m-t-10" style="color: #D62E08;">{{inviteCode}}</text>
						</view>
            
            <image :src="codeImage" style="margin-top: 15rpx; width: 286rpx; height: 286rpx;"></image>
						<!-- 扫码下载注册填写邀请码 -->
						<!-- <text class="fs-26" style="color: #FA8B0A;">下载注册填写邀请码</text> -->
						<!-- <text class="fs-26" style="color: #FA8B0A;">进入置换商城</text> -->
            
        </view>
        <view class="fr-c save-btn m-t-40" @click.stop="posterDraw">
            <image src="/static/images/home/home_down.png" style="width: 28rpx; height: 34rpx;"></image>
            <text class="fs-30 fm-ali c-ff m-l-10">保存相册</text>
        </view>
        <canvas canvas-id="myCanvas" style="position: fixed; z-index: -99; opacity: 0; width: 534rpx; height: 934rpx;"></canvas>
    </view>
</template>

<script>
    export default {
        name:"InvitePup",
				props:{
					inviteCode:{
						type:String,
						default:''
					}
				},
        data() {
            return {
                // inviteCode:'83RNFD',
                codeImage:'https://jiuhuan.jiuhuanmall.com/apk/tg.jpg',
                codeBg:'/static/images/home/invite_bg.png',
                ctx:null,
                img:''
            };
        },
        mounted() {
          this.ctx = uni.createCanvasContext('myCanvas')
        },
        methods:{
            async posterDraw() {
                uni.showLoading({
                    title: '正在绘制海报',
                    mask: true
                });
                const getimage = async (url) => {
                    let res = await uni.getImageInfo({
                        src: url
                    })
                    return res[1].path
                }
                const bgurl = await getimage(this.codeBg)
                const code = await getimage(this.codeImage)
                const ctx = this.ctx
                const {
                    windowWidth,
                    windowHeight
                } = uni.getSystemInfoSync()
                const pixl = windowWidth / 750
                const hpixl = windowHeight / 1624
                ctx.drawImage(bgurl, 0, 0, 534*pixl, 934*pixl)
                ctx.save()
                ctx.beginPath()
            
                // 绘制邀请码
                ctx.font = '10px Alibaba'
                ctx.fillStyle = "#FA8B0A"
                ctx.setFontSize(26*pixl)
                ctx.setTextAlign('center')
                ctx.fillText('邀请码', 534*pixl / 2, 405 * pixl)  // 258
                ctx.fillStyle = "#D62E08"
                ctx.setFontSize(48*pixl)
                ctx.setTextAlign('center')
                ctx.fillText(this.inviteCode, 534*pixl / 2, 460 * pixl)  // 306
                ctx.drawImage(code, 124 * pixl, pixl * 375, 286 * pixl, 286 * pixl)
                ctx.font = '10px Alibaba'
                ctx.fillStyle = "#FA8B0A"
                ctx.setFontSize(26*pixl)
								// 扫码
                // ctx.fillText('下载注册填写邀请码', 534*pixl / 2, 500 * pixl)  // 258
                // ctx.fillText('进入置换商城', 534*pixl / 2, 540 * pixl)  // 258
                ctx.draw(true, res => {
                    uni.canvasToTempFilePath({
                        canvasId: 'myCanvas',
                        success: res => {
                            console.log(res, '绘制成功')
                            this.img = res.tempFilePath
                            uni.saveImageToPhotosAlbum({
                                filePath: res.tempFilePath,
                                success: res => {
                                    console.log(res)
                                    uni.showToast({
                                        title: '保存图片成功',
                                        mask:true
                                    })
                                },
                                fail: (err) => {
                                    uni.showToast({
                                        title: '保存失败，请截图分享',
                                        icon: 'none',
                                        mask:true
                                    })
                                    console.log(err)
                                }
                            })
                        },
                        complete: () => {
                            uni.hideLoading()
                        }
                    });
                })
            },
            //保存图片
            saveImage() {
                uni.saveImageToPhotosAlbum({
                    filePath: this.img,
                    success: res => {
                        console.log(res)
                        uni.showToast({
                            title: '保存图片成功',
                            icon: 'none'
                        })
                    },
                    fail: (err) => {
                        console.log(err)
                    }
                })
            },
        }
    }
</script>

<style>
.save-btn{
    width: 354rpx;
    height: 118rpx;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 59rpx;
}
</style>
